<!-- 我的 – 我的课程 – 评价			evaluate -->
<template>
	<view class="pb70">
		<view class="evaluate-top">
			<view class="w90 pb10" v-for="(item,index) in data" :key="index">
				<view class="f b c p_t_20">
					<view>
						<text class="bold">教练评价</text>
					</view>
					<!-- <view>
						<text class="fs16 hui">匿名评价</text>
					</view> -->
				</view>
				<view class="quanxian"></view>
				<view class="f  c p_t_20">
					<view class="m_t_10">
						<image style="width: 100rpx;height: 100rpx;" :src="item.img" mode=""></image>
					</view>
					<view class="f d p_l_20">
						<text class="fs24 ellipsis">{{item.name}}</text>
						<text class="fs16 hui p_t_10 ellipsis-2">{{item.content}}</text>
					</view>
				</view>
				<view class="f b c p_t_20">
					<view class="evaluate-man  dis-flex flex-align-center flex-center" :class="item.is_manyi == 0 ? 'evaluate-man':'evaluate-man1'" @click="getChecked(index,0)">
						<image style="width: 24rpx;height: 24rpx;" src="../../../static/img/041.png" mode=""></image>
						<text class="fs16 p_l_10" :class="item.is_manyi == 0 ? '':'cca'">满意</text>
					</view>
					<view class="evaluate-man   dis-flex flex-align-center flex-center" :class="item.is_manyi == 1 ? 'evaluate-man':'evaluate-man2'" @click="getChecked(index,1)">
						<image style="width: 24rpx;height: 24rpx;" src="../../../static/img/041.png" mode=""></image>
						<text class="fs16 p_l_10" :class="item.is_manyi == 1 ? '':'ccs'">不满意</text>
					</view>
				</view>
			</view>
		</view>
		<view class="evaluate-con">
			<view class="w90">
				<view class="f b c p_t_20">
					<view>
						<text class="bold">课程评价</text>
					</view>
				<!-- 	<view>
						<text class="fs16 hui">匿名评价</text>
					</view> -->
				</view>
				<view class="quanxian m_t_40"></view>
				<view class="p_t_40 dis-flex flex-center">
					<!-- <u-rate :count="count" size="90" gutter="35" active-color="#4c67ff" v-model="value" ></u-rate> -->
					<!-- <view class="f d c" @click="getIndex(0)">
						<image style="width: 88rpx;height: 88rpx;" v-if="idx==0" src="../../../static/img/048.png" mode=""></image>
						<image style="width: 88rpx;height: 88rpx;" v-else src="../../../static/img/043.png" mode=""></image>
						<text class="fs16" :class="idx == 0 ? 'blue':''">等级</text>
					</view>
					<view class="f d c" @click="getIndex(1)">
						<image style="width: 88rpx;height: 88rpx;" v-if="idx==1" src="../../../static/img/049.png" mode=""></image>
						<image style="width: 88rpx;height: 88rpx;" v-else src="../../../static/img/044.png" mode=""></image>
						<text class="fs16" :class="idx == 1 ? 'blue':''">等级</text>
					</view>
					<view class="f d c" @click="getIndex(2)">
						<image style="width: 88rpx;height: 88rpx;" v-if="idx==2" src="../../../static/img/050.png" mode=""></image>
						<image style="width: 88rpx;height: 88rpx;" v-else src="../../../static/img/045.png" mode=""></image>
						<text class="fs16" :class="idx == 2 ? 'blue':''">等级</text>
					</view>
					<view class="f d c" @click="getIndex(3)">
						<image style="width: 88rpx;height: 88rpx;" v-if="idx==3" src="../../../static/img/051.png" mode=""></image>
						<image style="width: 88rpx;height: 88rpx;" v-else src="../../../static/img/046.png" mode=""></image>
						<text class="fs16" :class="idx == 3 ? 'blue':''">等级</text>
					</view>
					<view class="f d c" @click="getIndex(4)">
						<image style="width: 88rpx;height: 88rpx;" v-if="idx==4" src="../../../static/img/052.png" mode=""></image>
						<image style="width: 88rpx;height: 88rpx;" v-else src="../../../static/img/047.png" mode=""></image>
						<text class="fs16" :class="idx == 4 ? 'blue':''">等级</text>
					</view> -->
				</view>
				<view class="p_t_20">
					<u-input v-model="content" type="textarea" height="270" />
				</view>
			</view>
		</view>
	<!-- 	<view class="evaluate-but" @click="getIndex(5)" v-show="isshow == false">
			<button type="default">提交</button>
		</view> -->
		<view class="aa btn-submit-box" @click="getpingjia()" >
			<button type="default">提交</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				idx:Number,
				ida:'',
				isshow:false,
				checked:false,
				data:[],
				count:5,
				value: 5,
				id:''
			}
		},
		onLoad(e) {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '评价'
			})
			this.id = e.id
			this.init()
		},
		methods: {
			init(){
				var that = this
				var json = {
					id:that.id
				}
				that.$http.post(that.$config.UrlPostuserpjInfo, json).then((res) => {
					if (res.status == 1) {
						var data = res.data
						for (let i = 0; i < data.length; i++) {
							data[i]['is_manyi'] = 1
						}
						that.data = data
					}
				})
			},
			// 提交
			getpingjia(id) {
				var that = this
				var data = that.data
				var jsonarr = []
				for (let i = 0; i < data.length; i++) {
					let arr = new Object();
					arr.id = data[i].id
					arr.star = data[i].is_manyi
					jsonarr.push(arr)
				}
				var json = {
					id:that.id,
					jsonarr:JSON.stringify(jsonarr),
					star:that.value,
					content:that.content
				}
				that.$http.post(that.$config.UrlPostpingjia, json).then((res) => {
					if (res.status == 1) {
						this.$api.toast('提交成功')
						setTimeout(()=>{
							this.$api.back()
						},500)
						
					}
				})
			},
			getChecked(index,type){
				if(type == 0){
					this.data[index].is_manyi = 1
				}else{
					this.data[index].is_manyi = 0
				}
				
			}
		}
	}
</script>

<style scoped>
	.ccs{
		color:#CE2424;
	}
	.cca{
		color:#1F73F2;
	}
	.cc{
		background: #cde9ff;
	}
	.aa{
		margin:0 auto;
		margin-top:80rpx;
	}
	.aa>button{
		width: 686rpx;
		height: 72rpx;
		line-height:72rpx;
		opacity: 1;
		background:#4c67ff;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #fff;
	}
	.blue{
		color:#FF7105;
	}
	.warps {
		height:100vh;
		overflow: hidden;
		background-color:#F6F8FC;
	}	
	.evaluate-top{
		width: 686rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
		margin-top:36rpx;
	}
	.evaluate-man{
		width: 280rpx;
		height: 56rpx;
		opacity: 1;
		background: #f2f2f2;
		border-radius: 8rpx;
	}
	.evaluate-man1{
		width: 280rpx;
		height: 56rpx;
		opacity: 1;
		background:#CDE9FF;
		border-radius: 8rpx;
	}
	.evaluate-man2{
		width: 280rpx;
		height: 56rpx;
		opacity: 1;
		background:#FFCDCD;
		border-radius: 8rpx;
	}
	.evaluate-con{
		width: 686rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
		margin-top:36rpx;
	}
	.evaluate-but{
		margin:0 auto;
		margin-top:80rpx;
	}
	.evaluate-but>button{
		width: 686rpx;
		height: 72rpx;
		line-height:72rpx;
		opacity: 1;
		background: #dcdcdc;
		border-radius: 12rpx;
		font-size: 24rpx;
		color: #999999;
	}
</style>

